<template>
  <div class="loader_wrap">
    <div class="loader_box">
      <div class="loader_first"></div>
      <div class="loader_s"></div>
      <div class="loader_t"></div>
      <div class="loader_f"></div>
    </div>
  </div>
</template>
<style scoped lang="scss">
@mixin same_size($sz) {
  width: $sz;
  height: $sz;
}
@mixin pois {
  position: relative;
  top: 0;
  left: 0;
}
@mixin runing {
  position: relative;
  top: 0;
  left: 0;
  animation-name: move;
  /* 持续时间 */
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
.loader_wrap {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  @include same_size(100%);
  background-color: #2c294f;
  display: flex;
  justify-content: center;
  align-items: center;
  @keyframes move {
    /* 开始状态 */
    0% {
      top: 0;
    }
    50% {
      top: -90px;
    }
    100% {
      top: 0;
    }
  }
  .loader_box {
    @include same_size(300px);
    display: flex;
    justify-content: center;
    align-items: center;
    .loader_first {
      @include same_size(30px);
      @include runing;
      background: rgb(158, 172, 138);
      clip-path: polygon(50% 0px, 100% 100%, 0px 100%);
    }
    .loader_s {
      @include runing;
      @include same_size(30px);
      margin: 0 10px;
      animation-delay: 0.5s;
      background: #2c294f;
      border-radius: 50%;
      border: 5px solid #aa7757;
    }
    .loader_t {
      @include runing;
      @include same_size(20px);
      background-color: #2c294f;
      border: 5px solid #ffc107;
    }
    .loader_f {
      @include runing;
      @include same_size(30px);
      margin: 0 10px;
      animation-delay: 0.5s;
      background-color: #912969;
      clip-path: polygon(50% 0px, 0 50%, 50% 100%, 100% 50%);
    }
  }
}
</style>
